<template>
  <div class="student">
    <div class="box">
        <div class="radio"></div>
        <div class="src">
          <h1>{{msg}}</h1>
          <h2><span>学生姓名:</span><span>{{name}}</span></h2>
          <h2>学生性别:{{sex}}</h2>
          <h2>学生年龄:{{myAge}}</h2>
          </div>
          <button @click="changAge">改变年龄</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'School',
  data () {
    return {
     myAge:this.age
    }
  },
  methods: {
    changAge(){
      this.myAge=this.myAge+1;
    }
  },
  mounted () {

  },
  // 1.props:["name","age","sex"]  简单接收
  //接受数据的同时对数据进行限制
  // 2.props:{
  //   name:String,
  //   sex:String,
  //   age:Number  
  // }
  props:{
    name:{
      //必填且参数类型为字符串
      type:String,
      require:true
    },
    sex:{
      type:String,
      require:true
    },
    age:{
      type:Number,
      default:99
    },
    msg:{
      type:String,
      require:true
    }
  }
}
</script>

<style scoped>
    .radio{
      background-color: black;
      position:absolute;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      top:8px;
      left: 25px;
    }
    .student{
        margin: 0 auto; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .box{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        width: 300px;
        background-color: rgb(218, 218, 216);
        border-radius: 25px;
        padding-bottom: 10px;
    }
    h2{
      border-radius: 25px;
      display: flex;
      padding: 10px;
      background-color: rgb(236, 236, 243);
    }
    h1{
      color: white;
    }
    button{
      border-radius: 25px;
      padding: 10px;
      background-color: rgb(211, 212, 204);
    }
    span{
      display: block;
      padding: 10px;
    }
    .src{
      margin: 25px 2px 10px 2px;
      padding: 15px;
      border: 1px black solid;
      background-color: black;
    }
</style>
